<template>
  <div class="wrapper">
    <div class="close-button">
      <slot name="close-button"></slot>
    </div>
    <div class="content">
      <slot name="content"> </slot>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
</script>

<style lang='less' scoped>
@import url("./css/index.css");

.wrapper {
  width: 370px;
  max-height: 650px;
  background: #fff;
  border-radius: 5px;
  position: absolute;
  left: 10px;
  top: 110px;
  z-index: 1000;
  box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);

  animation-name: modalopen;
  animation-duration: 0.5s;
}

.content {
  height: 500px;
  padding-left: 15px;
  padding-right: 15px;
  overflow: auto;
}

/* 弹窗消失的动画 */
.modal:target .wrapper {
  animation-name: modalclose;
  animation-duration: 0.5s;
}

/* 动画定义 */
@keyframes modalopen {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalclose {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
</style>